import * as React from 'react';
import { Layout, Dropdown, Icon, Menu } from 'antd';
const { Header, Sider, Content } = Layout;
import "../less/ILayout.less";
import IMenu from './IMenu';

import store from '../store/index';
type Props = {
    children: React.ReactNode,
}

type MenuClickProps = {
    key: string,
}
const ILayout: React.FC<Props> = (props: Props) => {

   console.log(props)
    const MenuClick = ({ key }: MenuClickProps) => {
        switch (key) {
            case "loginOut":
                store.userStore.loginOut();
                break;
            default:
                break;
        }
    }

    const header = (
        <Menu>
            <Menu.Item key="loginOut" onClick={MenuClick}>退出登录</Menu.Item>
        </Menu>
    );

    return (
        <Layout className="ILayout" style={{
            height: "100vh"
        }}>
            <Sider
                breakpoint="lg"
                collapsedWidth="0"
                theme="light"
            >
                <div className="iTitle center">HXM</div>
                <IMenu {...props}/>
            </Sider>
            <Layout>
                <Header className="iHeader" style={{ background: '#fff' }} >
                    <Dropdown overlay={header} trigger={['click']}>
                        <a className="ant-dropdown-link" href="#">
                            {store.userStore.userInfo.email} <Icon type="down" />
                        </a>
                    </Dropdown>
                </Header>
                <Content className="iContent" style={{ background: '#fff' }}>
                    <div className="ibox">
                        {props.children}
                    </div>
                </Content>
            </Layout>
        </Layout>
    )
}

export default ILayout;